<template>
  <div class="conveyor-belt">
    <!-- 创建 SVG 元素 -->
    <svg ref="svg"></svg>
    <div>
      <div class="xz">
        <div v-for="(mouth, index) in traysData.trayMouths" :key="index" :class="['xz-' + mouth, 'mouth-' + index]">
          <div class="xz-t"></div>
          <div class="item2"
               :class="{ 'in-goods': traysData.trayInGoods[index], 'err-status': traysData.trayErrStatus[index] }"
               :id="`item-${index}`">
            <span class="num" :ref="'numElement'">{{mouth}}</span>
          </div>
          <div class="xz-b"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {onMounted, ref, nextTick, defineComponent} from 'vue';
import * as d3 from "d3";




export default defineComponent({
  props: {
    traysData: {
      type: Object,
      required: true,
    },

  },
  setup() {
    const svg = ref(null);
    const numRef = ref([]);

    onMounted(() => {
      nextTick(() => {
        // 获取 SVG 元素并创建 d3 选择集
        const svgElement = d3.select(svg.value);
        const numRef = ref([])

        // 创建环形轮廓
        const width = svgElement.attr('width');
        const height = svgElement.attr('height');
        const innerRadius = 140;
        const outerRadius = 269;
        const numSpokes = 9;
        const spokeWidth = 21.4;

        const crossBelt = svgElement.append('g')
            .attr('class', 'cross-belt')
            .attr('transform', `translate(${width / 2}, ${height / 2})`);

        const arc = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(1.527)
            .endAngle(Math.PI * 0.97);

        crossBelt.append('path')
            .attr('d', arc)
            .attr('fill', 'none')
            .attr('stroke', '#add8e6')
            .attr('stroke-width', 2);
        const spokes = d3.range(numSpokes);
        const spokeAngle = (Math.PI / 2.25) / (numSpokes - 1);
        const spokeLength = outerRadius - innerRadius;
        const spokeStartAngle = spokeAngle / 2;
        const spokeEndAngle = Math.PI - spokeAngle / 2;

        crossBelt.attr('transform', `translate(${width / 2}, ${height / 2}) rotate(4.8) translate(8,-8)`);


        //辐条
        // 将 g 元素的 ref 属性设置为 numRef
        // crossBelt.selectAll('.num')
        //     .data(spokes)
        //     .enter()
        //     .append('g')
        //     .attr('class', 'num')
        //     .attr('ref', (d, i, nodes) => {
        //       numRef.value[i] = nodes[i];
        //     })
        //     .attr('transform', function (d) {
        //       const angle = spokeAngle * d;
        //       return `rotate(${angle * 180 / Math.PI})`;
        //     })
        //     .each(function () {
        //       const spokeGroup = d3.select(this);
        //       spokeGroup.append('path')
        //           .attr('d', function () {
        //             return `M ${innerRadius},${-spokeWidth / 2}
        //           L ${innerRadius},${spokeWidth / 2}
        //           L ${innerRadius + spokeLength * 0.33},${spokeWidth / 2}
        //           L ${innerRadius + spokeLength * 0.33},${-spokeWidth / 2}
        //           L ${innerRadius},${-spokeWidth / 2}`;
        //           })
        //           .attr('fill', '#265665');
        //       spokeGroup.append('path')
        //           .attr('d', function () {
        //             return `M ${innerRadius + spokeLength * 0.33},${-spokeWidth / 2}
        //           L ${innerRadius + spokeLength * 0.33},${spokeWidth / 2}
        //           L ${innerRadius + spokeLength * 0.67},${spokeWidth / 2}
        //           L ${innerRadius + spokeLength * 0.67},${-spokeWidth / 2}
        //           L ${innerRadius + spokeLength * 0.33},${-spokeWidth / 2}`;
        //           })
        //           .attr('fill', '#22c8de');
        //       spokeGroup.append('path')
        //           .attr('d', function () {
        //             return `M ${innerRadius + spokeLength * 0.67},${-spokeWidth / 2}
        //           L ${innerRadius + spokeLength * 0.67},${spokeWidth / 2}
        //           L ${outerRadius},${spokeWidth / 2}
        //           L ${outerRadius},${-spokeWidth / 2}
        //           L ${innerRadius + spokeLength * 0.67},${-spokeWidth / 2}`;
        //           })
        //           .attr('fill', '#265665');
        //     });

      });
    });

    return {
      svg,
      numRef
    };
  },

  mounted() {
    onMounted(() => {
      // 执行一些初始化操作

    });
  },
  methods: {

  },
});
</script>

<style scoped lang="scss">
.conveyor-belt {
  width: 250px;
  height: 200px;
  position: absolute;

}

svg {
  width: 300px;
  height: 300px;
  transform: translate(1px, 4px);
}

.num {
  width: 17px;
  height: 30px;
  display: inline-block;
  transform: rotate(90deg);
}
.xz {
  border: 2px solid black;
  border-radius: 15px;

  .in-goods {
    background-color: green;
  }

  .err-status {
    background-color: red;
  }
}

.xz-t,
.xz-b {
  height: 40px;
  border: 1px solid lightblue;
  background-color: #265665;
}

.item2 {
  height: 50px;
  border-top: 2px solid lightblue;
  border-bottom: 2px solid lightblue;
  background-color: #22c8de;
}

/* Dynamic classes */
.mouth-0 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(14px, -171px) rotate(-5deg);
}

.mouth-1 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(46px, -175px) rotate(-11.25deg);
}

.mouth-2 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(82px, -187px) rotate(-22.5deg);
}

.mouth-3 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(115px, -205px) rotate(-33.75deg);
}

.mouth-4 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(146px, -229px) rotate(-45deg);
}

.mouth-5 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(170px, -258px) rotate(-56.25deg);
}

.mouth-6 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(190px, -292px) rotate(-67.5deg);
}

.mouth-7 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(203px, -326px) rotate(-77deg);
}

.mouth-8 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(210px, -363px) rotate(-88deg);
}

//.xz {
//  border: 2px solid black;
//  border-radius: 15px;
//  transform: translate(3px,2px) rotate(1deg);
//}
//
//.xz-1 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(10px, -170px) rotate(-5deg);
//
//.xz-1-t,
//.xz-1-b {
//  height: 40px;
//  border: 1px solid lightblue;
//  background-color: #265665;
//}
//
//.item2 {
//  height: 50px;
//  border-top: 2px solid lightblue;
//  border-bottom: 2px solid lightblue;
//  background-color: #22c8de;
//}
//
//}
//
//.xz-2 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(40px, -175px) rotate(-11.25deg);
//
//.xz-2-t,
//.xz-2-b {
//  height: 40px;
//  border: 1px solid lightblue;
//  background-color: #265665;
//}
//
//.item2 {
//  height: 50px;
//  border-top: 2px solid lightblue;
//  border-bottom: 2px solid lightblue;
//  background-color: #22c8de;
//}
//
//}
//
//.xz-3 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(77px, -187px) rotate(-22.5deg);
//
//.xz-3-t,
//.xz-3-b {
//  height: 40px;
//  border: 1px solid lightblue;
//  background-color: #265665;
//}
//
//.item2 {
//  height: 50px;
//  border-top: 2px solid lightblue;
//  border-bottom: 2px solid lightblue;
//  background-color: #22c8de;
//}
//}
//
//.xz-4 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(111px, -207px) rotate(-33.75deg);
//
//.xz-4-t,
//.xz-4-b {
//  height: 40px;
//  border: 1px solid lightblue;
//  background-color: #265665;
//}
//
//.item2 {
//  height: 50px;
//  border-top: 2px solid lightblue;
//  border-bottom: 2px solid lightblue;
//  background-color: #22c8de;
//}
//}
//
//.xz-5 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(140px, -231px) rotate(-45deg);
//
//.xz-5-t,
//.xz-5-b {
//  height: 40px;
//  border: 1px solid lightblue;
//  background-color: #265665;
//}
//
//.item2 {
//  height: 50px;
//  border-top: 2px solid lightblue;
//  border-bottom: 2px solid lightblue;
//  background-color: #22c8de;
//}
//}
//
//.xz-6 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(166px, -262px) rotate(-56.25deg);
//
//.xz-6-t,
//.xz-6-b {
//  height: 40px;
//  border: 1px solid lightblue;
//  background-color: #265665;
//}
//
//.item2 {
//  height: 50px;
//  border-top: 2px solid lightblue;
//  border-bottom: 2px solid lightblue;
//  background-color: #22c8de;
//}
//}
//
//.xz-7 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(185px, -296px) rotate(-67.5deg);
//
//.xz-7-t,
//.xz-7-b {
//  height: 40px;
//  border: 1px solid lightblue;
//  background-color: #265665;
//}
//
//.item2 {
//  height: 50px;
//  border-top: 2px solid lightblue;
//  border-bottom: 2px solid lightblue;
//  background-color: #22c8de;
//}
//}
//
//.xz-8 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(197px, -331px) rotate(-77deg);
//
//.xz-8-t,
//.xz-8-b {
//  height: 40px;
//  border: 1px solid lightblue;
//  background-color: #265665;
//}
//
//.item2 {
//  height: 50px;
//  border-top: 2px solid lightblue;
//  border-bottom: 2px solid lightblue;
//  background-color: #22c8de;
//}
//}
//
//.xz-9 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(203px, -370px) rotate(-88deg);
//
//.xz-9-t,
//.xz-9-b {
//  height: 40px;
//  border: 1px solid lightblue;
//  background-color: #265665;
//}
//
//.item2 {
//  height: 50px;
//  border-top: 2px solid lightblue;
//  border-bottom: 2px solid lightblue;
//  background-color: #22c8de;
//}
//}
</style>